<template>
	<view class='product-action'>
		<view class="action-container flex flex-ai-center flex-js-sb">
			<view v-if="saleStatus!=4" class="flex flex-dir-col">
				<view class="price font-color-price" >
					<text class="font-size-12">￥</text>
					<text class="font-size-17">{{product.price}}</text>
				</view>
				<view @click="toPage" class="flex flex-ai-center">
					<view style="color: #1E1E1E;" class="font-w-600 font-size-13">市场列表</view>
					<w-icon name="right" size="18"></w-icon>
				</view>
			</view>
			<view class="" v-if="saleStatus==1">
				<view class="action-btn flex flex-dir-col flex-center no-sub" v-if="!product.is_sub" @click="targetSub">
					<text>{{handleLang('设置购买提醒')}}</text>
					<u-count-down :time="countDown" format="HH:mm:ss"></u-count-down>
				</view>
				<view class="action-btn flex flex-dir-col flex-center" v-else @click="targetSub">
					<text>{{handleLang('取消提醒')}}</text>
					<text>
						<u-count-down :time="countDown" format="HH:mm:ss"></u-count-down>
					</text>
				</view>
			</view>
			<view class="flex flex-ai-center ml-6" style="flex: 1;" v-if="saleStatus==2">
				<w-button class="w-100"  @click='buyAction'>立即购买</w-button>
			</view>
			<w-button v-if="saleStatus==4" style='width:100%' :disabled="true">{{handleLang('已售罄')}}</w-button>
		</view>

		<u-popup :show="show" mode='bottom' bgColor='transparent' @close="show=false">
			<view class="submit-order bg-color-item pa-12">
				<view class="flex flex-js-sb flex-ai-center">
					<view class="flex font-color-minor flex flex-ai-end">
						<text class="font-color-textPrimary">{{handleLang('购买数量')}}</text>
						<text class="font-size-10 ml-4" v-if="maxBuyCount">{{handleLang(`（购买总数不得超过${maxBuyCount}个`)}}）</text>
						<text class="font-size-10 ml-4" v-else>{{handleLang('您已达到限购数量')}}</text>
					</view>
					<w-icon size="24" name="close2" @click='show=false'></w-icon>
				</view>
				<view class="pt-12 flex">  
					<image class="br-4" :src="$ossUrl+product.listimg" style="width: 136rpx;height: 136rpx;"></image>
					<view class=" pl-12 ptb-10 flex-1">
						<view class="price font-color-price">
							<text class="font-size-12">￥</text>
							<text class="font-size-20 ml-4">{{product.price}}</text>
						</view>
						<text class="font-size-10 font-color-999" v-if="product.goods_type!=1">{{handleLang('编号随机')}}</text>
					</view>
					<view class="flex flex-ai-center" style="width: 201rpx;height: 61rpx;border-radius: 100rpx;border: 1rpx solid #ccc;">
						<view class="pa-10"><w-icon :name="count<=1? 'minus-disable':'minus-active'" size="14" @click='minus'></w-icon></view>
						<input v-model="count" type="number" @input="changeCount" class="plr-4 font-color-textPrimary"
							style="width: 126rpx;text-align: center;border-left: 1rpx solid #ccc;border-right: 1rpx solid #ccc;" />						
						<view class="pa-10 flex flex-ai-center flex-js-center"><w-icon :name="count==maxBuyCount? 'add-disable':'add-active'" size="14" @click='add'></w-icon></view>
					</view>
				</view>
				<w-button class='mt-12' :disabled="!count||count>maxBuyCount" @click='comfirmOrder'>立即购买</w-button>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import productMixin from '@/mixins/product.js'
	// import {
	// 	createOrder
	// } from '@/api/order/index.js'
	import {
		mapActions
	} from 'vuex'
	import {
		subscribe
	} from '@/api/subscribe/index.js'
	export default {
		mixins: [productMixin],
		name: "z-product-action",
		props: {
			product: {
				type: Object,
				defaul() {
					return {
						batch: {},
						issuer: {},
						series: {},
					}
				}
			}
		},
		watch: {
			maxBuyCount: {
				immediate: true,
				handler(v) {
					this.count = v;
				}
			}
		},
		data() {
			return {
				show: false,
				count: 0,
				timer: null,
			};
		},
		methods: {
			...mapActions('order', ['confirmOrder']),
			targetSub() {
				let data = {
					type: this.product.goods_type == 1 ? 20 : 10,
					opr_id: this.product.goods_type == 1 ? this.product.id : this.product.batch.id
				}
				subscribe(data, !this.product.is_sub).then(res => {
					uni.showToast({
						title: res.msg
					})
					this.product.is_sub = !this.product.is_sub
					this.$emit("subChange", !this.product.is_sub)
				})
			},
			toPage(){
				uni.navigateTo({
					url:`/pages/market/marketGoodsList?id=${this.product.id}&goodsType=${this.product.goods_type}`
				})
			},
			changeCount({
				detail
			}) {
				let value = Number(detail.value)
				if (this.timer) clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					this.count = value
					if (value < 1) {
						this.count = 1
					}
					if (value > this.maxBuyCount) {
						this.count = this.maxBuyCount;
					}
				}, 500)
			},
			buyAction() {
				if (this.maxBuyCount == 1) {
					this.comfirmOrder()
				} else {
					this.show = true;
				}
			},
			//确认订单
			comfirmOrder() {
				this.show = false;
				uni.setStorage({
					key: 'confirmOrder',
					data: {
						product: this.product,
						count: this.count,
						order_type: 1,
						maxCount:this.maxBuyCount
					},
					success() {
						uni.navigateTo({
							url: "/pages/order/orderSubmit"
						})
					}
				})

			},
			minus() {
				if (this.count <= 1) return;
				this.count--
			},
			add() {
				if (this.count == this.maxBuyCount) return;
				this.count++
			}
		}
	}
</script>

<style lang="scss">
	.product-action {
		width: 750rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: $bottom-btn-color;
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 99;

		.submit-order {
			width: 750rpx;
			@extend .br-t-12,
			.br-16;
			padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
		}

		.action-container {
			@extend .plr-16;
			height: 120rpx;

			.price {
				display: inline;
				vertical-align: bottom;
				font-weight: 600;
			}

			.action-btn.no-sub {
				@extend .font-color-999;
				border: 2rpx solid #999;
				border-radius: 16rpx;
		
				/deep/ .u-count-down__text {
					@extend .font-size-12,
					.font-color-999;
				}
			}

			.action-btn {
				width: 480rpx;
				height: 92rpx;
				@extend .font-color-price;
				border: 1px solid #F8931F;
				border-radius: 66rpx;

				/deep/ .u-count-down__text {
					@extend .font-size-12,.font-color-price;
				}
			}
		}
	}
</style>
